<template>
  <div>
    <ul v-if="true">
      <li
        v-for="(item, i) in list"
        :key="i"
        @click="goto(item)"
        style="cursor: pointer"
      >
        <h2>{{ item.title }}</h2>
        <p class="describe">{{ item.describe }}</p>
        <div>
          <p class="time-icon">{{ gettime(item.updatetime) }}</p>
          <p>
            <el-tag
              v-for="(iTag, ii) in item.tag"
              :key="ii"
              :type="iTag.type"
              size="mini"
              style="margin-right: 10px"
              >{{ iTag.name }}</el-tag
            >
          </p>
        </div>
      </li>
    </ul>
    <transition name="slide">
      <loading v-show="isload" />
    </transition>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="init"
    />
    <!-- <el-pagination background v-show="total>0" :total="total" :current-page.sync="listQuery.page" :page-size.sync="listQuery.limit" @current-change="init" /> -->
  </div>
</template>
<script>
import { GET_ARTICLE_LIST } from "@/api/Article";
import Pagination from "@/components/Pagination";
import { dateStr } from "@/utils/getDateDiff";
export default {
  data() {
    return {
      list: [],
      total: 0,
      isload: true,
      listQuery: {
        limit: 10,
        page: 1,
        status: "normal",
      },
    };
  },
  created() {
    this.init();
  },
  components: {
    Pagination,
  },
  methods: {
    init() {
      this.isload = true;
      GET_ARTICLE_LIST(this.listQuery).then((res) => {
        this.list = res.data;
        this.total = res.total;
        setTimeout(() => {
          this.isload = false;
        }, 1000);
      });
    },
    goto(item) {
      localStorage.setItem("item", JSON.stringify(item));
      localStorage.setItem("is", true);
      this.$router.push({ name: "ArticleDetailed" });
    },
    gettime(time) {
      return dateStr(time);
    },
    CurrentPage() {
      GET_ARTICLE_LIST(this.listQuery).then((res) => {
        (this.list = res.data), (this.total = res.total);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
h2 {
  border-left: 5px solid #87e3ce;
  padding-left: 15px;
  color: #3d3d3d;
}
li {
  border-bottom: 2px solid #dddddd;
  div {
    display: flex;
    p:nth-child(2) {
      margin: 10px 0 0 20px;
    }
  }
}
.time-icon::before {
  background-image: url("../assets/icon/time.png");
}
.describe {
  color: #908d8d;
  font-size: 15px;
}
</style>